<template>
  <div class="cart">
        <!--头部区域-->
    <header class="header">
        <a href="index.html" class="icon-back"></a>
        <h3>购物车</h3>
        <a href="" class="icon-menu"></a>
    </header>
    <!--安全提示-->
    <section class="jd-safe-tip">
        <p class="tip-word"> 您正在安全购物环境中，请放心购物 </p>
    </section>
    <!--中间内容-->
    <main class="jd-shop-cart-list">
        <section>
            <div class="shop-cart-list-title">
                <div class="left">
                    <a href="javascript:;" class="cart-check-box" checked></a>
                    <span class="cart-logo"></span>
                    <span class="cart-title">京东自营</span>
                </div>
                <span class="right">您享受满100元免运费服务</span>
            </div>

            <div class="shop-cart-list-con" v-for="shop in shopListArr" :key="shop.shopId">

                <div class="left">
                    <a 
                      href="javascript:;" 
                      class="cart-check-box" 
                      :checked="shop.checked"
                      @click.prevent="oneShopChecked(shop)"
                    ></a>
                </div>

                <div class="center">
                    <img  :src="shop.shopImage" :alt="shop.shop">
                </div>

                <div class="right">
                    <a href="#">{{shop.shopName}}</a>
                    <div class="shop-price" style="margin-bottom:0.5rem;">
                      <div>单价:&yen; {{shop.shopPrice | moneyFormat}} *  {{shop.shopNumber }}</div> 
                      <div>总价:&yen;{{shop.shopPrice * shop.shopNumber | moneyFormat}}</div> 
                    </div>
                    <div class="shop-deal">
                        <span @click="ShopPrice(shop,false)">-</span>
                        <input disabled type="number" v-model="shop.shopNumber">
                        <span @click="ShopPrice(shop,true)">+</span>
                    </div>
                    <div class="shop-deal-right" @click="clickTrash(shop,$event)">
                        <span></span>
                        <span></span>
                    </div>
                </div> 
            </div>
  
        </section>
       
    </main>
    <!--面板-->
    <div ref="panel" class="panel" style="display: none;">
        <div ref="panelContent" class="panel-content">
            <div class="panel-title">您确认删除这个商品吗?</div>
            <div class="panel-footer">
                <a href="javascript:;" @click.prevent="hidePanel" class="cancel">取消</a>
                <a href="javascript:;" @click.prevent="delShop" class="submit">确定</a>
            </div>
        </div>
    </div>

    <!-- 底部通栏 -->
    <div id="tab_bar">

      <div class="tab-bar-left">
         <a 
            @click.prevent="CheckAllOrNot(isSelectedAll)"
            href="javascript:;" 
            class="cart-check-box" 
            :checked="isSelectedAll"
         ></a>
         <span>全选</span>
         <div class="select-all">
           合计: <span>{{totalPrice | moneyFormat}}</span>
         </div>
      </div>

      <div class="tab-bar-right">
        <a href="javascript:;" class="pay" @click="toPay">去结算</a>
      </div>

    </div>

  </div>
</template>

<script>
// 1. 引入样式
import './../assets/css/base.css'
import './../assets/css/cart.css'

// 2 从 vuex 中引入
import {mapState,mapActions,mapGetters} from 'vuex'

export default {
  name: 'Cart',
  data(){
    return { 
      // 盖子 
      up:'',
      // 要删除的商品
      currentDelShop: {} 
    }
  },
  computed:{
    ...mapState(['shopListArr']),
    ...mapGetters(['totalPrice','isSelectedAll'])
  },
  created(){
    this.reqShopList();
  },
  methods:{
    ...mapActions([
       'reqShopList',
       'delOneShop',
       'oneShopDeal',
       'CheckAllOrNot',
       'oneShopChecked'
       ]),
    
    // 1. 点击 垃圾篓
    clickTrash(shop,event){ 
         // 2.1 获取垃圾篓的盖子
          let trashes = event.target.parentNode; 
          let up = trashes.firstElementChild;
          //  console.log(up); 
          // // 2.2 加过渡
           up.style.transition = 'all .2s ease'; 

           // 2.3 实现动画
           up.style.transformOrigin = '0 0.5rem';  
           up.style.transform = 'rotate(-45deg)';
           this.up = up; 

           // 2.4 弹出面板  
           this.$refs.panel.style.display = 'block';
           this.$refs.panelContent.className = 'panel-content jump';

           // 2.5 存入要删除的商品
           this.currentDelShop = shop;
    },
   
    // 2. 点击面板取消
    hidePanel(){ 
      // 3.1 面板隐藏
      this.$refs.panel.style.display = 'none';
      this.$refs.panelContent.className = 'panel-content'; 
      // 3.2 盖子闭合
      this.up.style.transform = 'rotate(0)';  
    },

    // 3. 删除当前商品
    delShop(){

      // 4.1 隐藏面板
      this.hidePanel();

      // 4.2 获取索引
       const index = this.shopListArr.indexOf(this.currentDelShop);
       this.delOneShop(index);

       
    },

    // 4 单个函数 加减 
    ShopPrice(shop,flag){
      this.oneShopDeal({shop,flag});
    }, 
      
    // 5 去支付
    toPay(){
      let buyMsg = `您购买的商品:\n`;
      buyMsg += `--------------------'\n`;
      this.shopListArr.forEach((value)=>{
        if(value.checked){
          buyMsg += `编号:${value.shopId},单价:￥${value.shopPrice}元，购买数量:${value.shopNumber};\n`
        }
      })
      buyMsg += `--------------------'\n`;
      buyMsg += `合计金额:￥${this.totalPrice}元`;
      alert(buyMsg);
    }

  },
  filters:{
    // 格式化金钱
    moneyFormat(money){
      return '￥' + Number(money).toFixed(2);
    }
  }
}
</script>
 
<style scoped>
 
</style>
